function $id(id) {return document.getElementById(id)}
var statistics = $id('statistics');
var statisTitle  = $id('statisTitle');
var statisContent = $id('statisContent');
var pagerWrap = $id('pagerWrap');
var green = $id('green');
var blue = $id('blue');
var red = $id('red');
var sTitleList = statisTitle.getElementsByTagName('li');
var sContentList = document.getElementsByClassName('foo');
var pagerWrapList = pagerWrap.getElementsByTagName('li');
var titleLine = $id('titleLine');
var TITLEMARGIN = 50;   // statistics content title's margin-right;
var TITLELEFT = 20;

// get statistics content
function getStaC() {
	for(var i = 0; i < sTitleList.length; i++) {
		sTitleList[i].index = i;
		sTitleList[i].onclick = function() {
			for(var j = 0; j < sContentList.length; j++) {
				sTitleList[j].setAttribute("class","");
				sContentList[j].setAttribute("class","member-statis foo hide");
			}
			sTitleList[this.index].setAttribute("class","active1");
			sContentList[this.index].setAttribute("class","member-statis foo");
			titleLine.style.left = (TITLEMARGIN + sTitleList[this.index].clientWidth) * this.index + TITLELEFT + "px";
		}
	}
}
getStaC();
function changePager() {
	for(var i = 0; i < pagerWrapList.length; i++) {
		pagerWrapList[i].onclick = function() {
			for(var i = 0; i < pagerWrapList.length; i++) {
				pagerWrapList[i].setAttribute("class","")
			}
			this.setAttribute('class','number')
		}
	}
}
changePager()
var progressList = document.getElementsByClassName('progress');
var proDetails = $id('proDetails');


